<template>
  <div class="app-container customermerchantsNew">
    <el-divider content-position="left">客户信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="list-ditem">
          客户名称：
          <div>{{data.companyName}}</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="list-ditem">
          客户类型：
          <div>{{[,"企业","个人"][data.companyType]}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="list-ditem">
          联系人：
          <div>{{data.name}}</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="list-ditem">
          联系电话：
          <div>{{data.mobile}}</div>
        </div>
      </el-col>
    </el-row>

    <el-divider content-position="left">跟进信息</el-divider>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="意向状态：" prop="intentionState">
            <el-select v-model="form.intentionState" filterable placeholder="请输入意向状态" clearable size="small">
              <el-option
                v-for="(dict,i) in dict.type.merchantsrecord_type"
                :key="i"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="跟进方式：" prop="investigationMode">
            <el-select v-model="form.investigationMode" filterable placeholder="请输入跟进方式" clearable size="small">
              <el-option
                v-for="(dict,i) in dict.type.merchantsrecord_method"
                :key="i"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--<el-col :span="12">
          <el-form-item label="跟进记录：" prop="remark">
            <el-input rows="5" type="textarea" v-model="form.remark" placeholder="请输入跟进记录"/>
          </el-form-item>
        </el-col>-->
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="跟进记录：" prop="record">
            <el-input rows="5" type="textarea" v-model="form.record" placeholder="请输入跟进记录"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="计划跟进时间：" prop="date">
            <el-date-picker
              v-model="form.date"
              type="date"
              placeholder="选择计划跟进时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划跟进内容：" prop="remark">
            <el-input rows="5" type="textarea" v-model="form.remark" placeholder="请输入计划跟进内容"/>
          </el-form-item>
        </el-col>
      </el-row>-->

      <el-form-item class="footer">
        <el-button @click="cancel">关闭</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss">
  .app-main {
    background: #E7E7E7;
  }

  .app-container {
    margin: 15px;
    background: #fff;
    border-radius: 5px;
  }

  .customermerchantsNew {
    .el-divider {
      margin-bottom: 40px;
    }

    .list-ditem {
      display: flex;
      align-items: flex-start;
      font-size: 15px;
      color: #595959;
    }

    el-image__inner {
      width: auto;
    }

    .el-form-item__label{
      width:120px !important;
    }
    .el-form-item__content{
      margin-left:120px !important;
    }

    .footer {
      display: flex;
      justify-content: center;
    }
  }
</style>
<script>
  import {addRecord} from "@/api/customer/record";
  export default {
    name: "Contarct",
    dicts: ['merchantsrecord_type','merchantsrecord_method'],
    data() {
      return {
        data: {},
        form: {},
        rules: {}
      };
    },
    created() {
      this.data = this.conductionData.customermerchantsdetails;
      console.log(this.data);
    },
    destroyed() {
      this.conductionData.customermerchantsdetails=null;
    },
    methods: {
      getList() {

      },
      submitForm() {
        addRecord({
          customerId:this.data.id,
          ...this.form
        }).then(response => {
          this.$modal.msgSuccess("提交成功");
          this.$router.go(-1);
        });
      },
      cancel() {
        this.$router.go(-1);
      }
    }
  };
</script>
